<!doctype html>
<html lang="en">
<head>
<title>html</title>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        h2{text-align: end;}
    </style>
    <link rel="stylesheet" href="../css/2101.css">
</head>
<body>
<div>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</div>
<div>
    <h2>容器标签</h2>
    <div>div:块级标签，独占一行，可无限嵌套</div>
    <div>span:文本标签，不会独占一行</div>
</div>
<div>
    <h2>常用标签</h2>
    <div>
        <h3>语义化标签</h3>
        <p>p:段落标签</p>
        <div>
            <h4>a:超链接标签</h4>
            <a href="2102.html" target="_blank">跳转到网页,新开一页</a><br>
            <a href="https://www.baidu.com" target="_parent">当前页跳转到网址</a><br>
            <a href="#" target="_self">123</a><br>
            <a href="#" target="_top">456</a><br>
        </div>
        <div>
            <h4>img:图片标签</h4>
            <div>
                <img src="../img/2101.png" alt="加载失败" width="60" height="26">
            </div>
        </div>
        <div>
            <h3>列表</h3>
            <div>
                <h4>ul:无序列表</h4>
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
                <h4>ol:有序列表</h4>
                <ol>
                    <li>1</li>
                    <li>2</li>
                </ol>
                <h4>dl:层级列表</h4>
                <dl>
                    <dt>1</dt>
                    <dd>一</dd>
                    <dt>2</dt>
                    <dd>二</dd>
                </dl>
            </div>
        </div>
    </div>
    <div>
        <h3>修饰化标签</h3>
        <span>正常</span>
        <i>斜体</i><br>
        <em>斜体</em><br>
        <b>加粗</b><br>
        <strong>加粗</strong>
        <sub>下标</sub>
        <sup>上标</sup><br>
        <del>删除线</del>
    </div>
    <div>
        <h3>表单:form</h3>
        <form action="#">
            <div>
                <h4>input:</h4>
                <label>
                    <input type="text" placeholder="文本输入框"><br>
                    <input type="password" placeholder="密码输入框"><br>
                    <input type="file" name="文件"><br>
                    <input type="radio">单
                    <input type="radio">选<br>
                    <input type="checkbox">多
                    <input type="checkbox">选<br>
                    <input type="submit" name="提交">
                    <input type="reset" name="重置">
                    <input type="button">
                    <input type="hidden" name="隐藏">
                </label>
            </div>
            <div>
                <h4>select:</h4>
                <label>
                    <select name="select" id="select">
                        <option value="下">下</option>
                        <option value="拉">拉</option>
                        <option value="表">表</option>
                        <option value="单">单</option>
                    </select>
                </label>
            </div>
            <div>
                <h4>textarea:</h4>
                    <label>
                    <textarea name="textarea" id="textarea" cols="30" rows="10" placeholder="文本域"></textarea>
                </label>
            </div>
        </form>
    </div>
    <div>
        <h3>表格</h3>
        <table border="1" cellpadding="10" cellspacing="0">
            <tr>
                <th>表</th>
                <th>头</th>
            </tr>
            <tr>
                <td>内</td>
                <td>容</td>
            </tr>
            <tr>
                <td colspan="2">列合并</td>
            </tr>
            <tr>
                <td rowspan="2">行合并</td>
                <td></td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>